<template>
  <div class="tv-home">
    <div class="tv-control-header">
      <router-link to="/connect" class="tv-info">
        <p>{{isConn?`已连接:${currDev.body.name}`:currDev?'连接异常，请重新连接':'未绑定设备，请先绑定设备'}}</p>
        <img class="tv-info-arrow" src="~@/assets/control/arrow_black.png" />
      </router-link>
      <div class="tv-control-wrap">
        <!-- home -->
        <View class="tv-control-btn home"  @click="control('home')">
          <img src="~@/assets/control/ico_home.png" />
        </View>
        <!-- menu -->
        <View class="tv-control-btn menu"  @click="control('menu')">
          <img src="~@/assets/control/ico_menu.png" />
        </View>
        <!-- volume -->
        <div class="tv-control-btn volume" >
          <View class="volume-btn"  @click="control('volume-')">
            <img src="~@/assets/control/icon_volumn_des.png" />
          </View>
          <div class="volume-line"></div>
          <View class="volume-btn" @click="control('volume+')">
            <img src="~@/assets/control/icon_volumn_ins.png" />
          </View>
        </div>
        <!-- setting -->
        <View class="tv-control-btn setting">
          遥控设置
        </View>
      </div>
    </div>
    <div class="tv-control-body">
      <component :is="mode" @control="control"></component>
    </div>
    <div class="tv-control-footer">
        <View class="tv-control-btn key" @click="showText">
          <img src="~@/assets/control/icon_keyboard.png" />
        </View>
          <div class="tv-control-btn voice" @touchstart="voiceStart" @mousedown="voiceStart(true)">
          <img src="~@/assets/control/voice.png"/>
        </div>
         <View class="tv-control-btn return"  @click="control('return')">
          <img src="~@/assets/control/icon_return.png" />
        </View>
    </div>
  </div>
  <div v-show="is_text" class="voice-content" @click="is_text=false">
     <div class="voice-input" @click.stop="is_text=true">
        <img src="~@/assets/link_remote/tv1.png"/>
        <input ref="refText" v-model="voice_text" type="text" placeholder="输入内容"/>
        <View class="send" @click="sendVoice">发送</View>
    </div>
  </div>
    <div class="voice-mask" v-show="is_voice">
        <p class="voice-title">请说话</p>
        <div class="voice-bg">

        </div>
    </div>  
</template>
<script>
import { computed, nextTick, ref } from 'vue';
import View from "../components/View";
import KeysMode from "../components/KeysMode";
import TouchMode from "../components/TouchMode";
import { useStore } from 'vuex';
import {start,stop}  from './voice'
export default {
  name: "Home",
  components: {
    View,
    KeysMode,
    TouchMode
  },
  setup(){
    const mode=ref('KeysMode')
    const isInput=ref(false)
    const voice_text=ref('')
    const is_voice=ref(false)
    const is_text=ref(false)
    const is_pc=ref(false)
    const refText=ref(null)
    const store=useStore()
    const isConn=computed(()=>store.state.isConnect&&store.state.socket)
    const currDev=store.getters.getCurrDev
    const control=(oper)=>{
      store.dispatch('control',oper)
    }
    const sendVoice=()=>{
      if(voice_text.value.length==0){
        return
      }
      control(voice_text.value)
      voice_text.value=""
    }
    const showText=()=>{
      is_text.value=true
      nextTick(()=>{
        refText.value.focus()
      })
    }
    const voiceStart=(isPc=false)=>{
      is_pc.value=isPc
      console.log('voiceStart')
      is_voice.value=true
      control('voice_start')
      start()
      document.addEventListener(is_pc.value?'mouseup':'touchend',voiceStop)
    }
    const voiceStop=()=>{
      stop()
      control('voice_stop')
      console.log('voiceStop')
      is_voice.value=false
      document.removeEventListener(is_pc.value?'mouseup':'touchend',voiceStop)
    }
    return {
      mode,
      control,
      isConn,
      currDev,
      isInput,
      voice_text,
      sendVoice,
      is_voice,
      is_text,
      voiceStart,
      showText,
      refText
    }
  }
};
</script>
<style lang="stylus" scoped>
.tv-home
  height 100vh
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  .tv-control-btn
      border: 1px solid #e6e6e6;
      height 80px
      border-radius 150px
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content center
      img
        width 56px
        height 56px
  .tv-control-header
    padding 0 40px
    .tv-info
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 80px;
        font-size: 32px;
        border-radius: 100px;
        background-color: #ffe3e3;
        margin: 40px 0;
        padding: 0 15px 0 25px;
        box-sizing: border-box;
        color #000
        text-decoration none
        .tv-info-arrow
          float right
          widht 36px
          height 36px
    .tv-control-wrap
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding: 0 0 40px;
        justify-content: space-between;
        .home,.menu
          width 80px
        .volume
            height: 80px;
            justify-content: center;
            border-radius: 80px;
            border: 1Px solid #e6e6e6;
            overflow: hidden;
            .volume-line
              height: 40px;
              width: 2px;
              background: #e6e6e6;
            .volume-btn
              width: 108px;
              height: 80px;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
          .setting
              width: 190px;
              font-size: 32px;
  .tv-control-body
    flex 1
    border-top: 1Px solid #e5e5e5;
    border-bottom: 1Px solid #e5e5e5;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  .tv-control-footer
    width: 100%;
    height: 262px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding 0 40px
    box-sizing: border-box;
    .key,.return
      width 96px
      height 96px
    .voice
      width 208px
      height 208px
      border 0
      cursor pointer
      img 
        width 100%
        height 100%
.voice-content
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background-color: rgba(0,0,0,.3);
  .voice-input
    background #fff
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border: 1px solid #e6e6e6;
    border-radius: 60px;
    margin 20px
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    img 
        height 40px
        margin 0 10px 0 20px
    input 
        border none
        outline none
        flex 1
        height 40px
    .send 
        background: #fff;
        border: 2px solid #f63;
        border-radius: 36px;
        width: 224px;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #f63;
        letter-spacing: 0;
        justify-content: center;
        height: 60px;
        display: flex;
        align-items: center;
        cursor pointer
.voice-mask
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow hidden
  .voice-title
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    display: block;
    margin-top: 60px;
    z-index: 40;
  .voice-bg
    position: absolute;
    background: linear-gradient(175deg,#fe8c00,#f83600);
    border-radius: 100%;
    width: 150vw;
    height: 150vw;
    max-width 450Px
    max-height 450Px
    bottom -50vw
    animation: ripple 1s forwards,ripple1 .1s ease 1s infinite alternate;
@keyframes ripple {
    to {
        bottom: -50vw;
    }
}


@keyframes ripple1 {
    0% {
        bottom: -50vw;
        transform scale(1) ;

    }

    100% {
        bottom: -40vw;
        transform scale(.9) ;

    }
}
 @keyframes ripple2 {
      to {
          bottom: -50vh;
      }
  }
  @keyframes ripple3 {
      0% {
          bottom: -50vh;
          transform scale(1) ;
      }

      100% {
          bottom: -40vh;
          transform scale(.9) ;

      }
  }
@media (min-width: 450px)
  .voice-mask
    .voice-bg
      animation: ripple2 1s forwards,ripple3 .1s ease 1s infinite alternate;
</style>
